<!--
 * @Author: 李佳晶111 11238117+lijiajing-111@user.noreply.gitee.com
 * @Date: 2023-04-07 15:43:01
 * @LastEditors: 李佳晶111 11238117+lijiajing-111@user.noreply.gitee.com
 * @LastEditTime: 2023-04-07 16:37:18
 * @FilePath: \2\shop\src\views\pages\usersList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { getOrderlist, updaterOrder } from "@/api/services";

const { proxy } = getCurrentInstance();
const options = ref([
  {
    label: "未发货",
    value: "0",
  },
  {
    label: "已发货",
    value: "1",
  },
  {
    label: "已收货",
    value: "2",
  },
]);
let queryData = reactive({
  currentPage: 1,
  pageSize: 10,
  search: "",
});
let tableData = reactive({ list: [] });
let total = ref(0);
let userRef = ref(null);
onMounted(() => {
  getList();
});

const getList = async (page = 1) => {
  //   console.log("page: ", page);
  if (typeof page != "object") {
    queryData.currentPage = page;
  }
  const res = await getOrderlist(queryData);
  //   console.log("res: ", res);
  total.value = res.total;
  tableData.list = res.order;
};
const addOrEdit = async (item = {}) => {
  // console.log('item: ', item);
  const res = await updaterOrder({id:item.id,order_status:item.order_status==1?0:1});
  proxy.$message.success(res.msg);
  getList();
};
</script>
<template>
  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>账单列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="page_content">
    <div class="flex" style="margin-bottom: 20px">
      <div class="input_box flex" style="margin-right: 40px; width: 300px">
        <el-select
          clearable
          style="width: 200px"
          v-model="queryData.search"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, i) in options"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="getList"
          icon="Search"
          >搜索</el-button
        >
      </div>
      <!-- <el-button type="primary" @click="addOrEdit('新增商品', {})"
        >新增商品</el-button
      > -->
    </div>
    <el-table :data="tableData.list" stripe style="width: 100%">
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="user_address" label="收货地址" />
      <el-table-column prop="product_name" label="商品名称" />
      <el-table-column prop="order_time" label="创建时间" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-popconfirm
            title="确定修改吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="addOrEdit(scope.row)"
          >
            <template #reference>
              <el-button link type="primary">修改订单状态</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="example-pagination-block d-ac-jc">
      <el-pagination
        v-model:current-page="queryData.currentPage"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, prev, pager, next"
        :total="total"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<style scoped>
.input_box {
  width: 200px;
  margin-right: 15px;
}

.example-pagination-block {
  margin-top: 20px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 20px;
}
</style>
